<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>OrbitControls控制器案例</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="./js/three.min.js"></script>
		<script src="./js/DeviceOrientationControls.js"></script>
		<script src="./js/stats.min.js"></script>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}

			canvas {
				display: block;
			}

			.controlBtn {
				position: absolute;
				right: 10px;
				top: 10px;
				color: #FFF;
				padding: 3px;
				border-radius: 5px;
				background-color: red;
				z-index: 100;
				cursor: pointer;
			}
			.controlIconae{
				background-color: #FF0;
				color:#F00;
			}
			.controlIcon{
				background-color: #0F0;
				color:#F0F;
			}
		</style>
	</head>
	<body onload="draw();">
		<div id="controlBtn" class="controlBtn controlIconae">陀螺仪</div> <!-- 陀螺仪开启按钮 -->
	</body>
	<script>
		var renderer, camera, scene, stats, ambientLight, directionalLight, control;
var deviceControl;
		var texture_placeholder, isUserInteracting = false,
			onMouseDownMouseX = 0,
			onMouseDownMouseY = 0,
			lon = 90,
			onMouseDownLon = 0,
			lat = 0,
			onMouseDownLat = 0,
			phi = 0,
			theta = 0,
			target = new THREE.Vector3(),
			touchX,
			touchY,
			onPointerDownLon,
			onPointerDownLat;

		function initRender() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			//告诉渲染器需要阴影效果
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
			document.body.appendChild(renderer.domElement);
		}

		function initCamera() {
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.set(0, 100, 200);
			camera.lookAt(new THREE.Vector3(0, 0, 0));


		}

		function initScene() {
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0xa0a0a0);
		}



		//第二种调试的灯光
		function addLight() {
			scene.add(new THREE.AmbientLight(0x444444))

			const light = new THREE.DirectionalLight(0xffffff)
			light.position.set(0, 20, 20)

			light.castShadow = true
			light.shadow.camera.top = 10
			light.shadow.camera.bottom = -10
			light.shadow.camera.left = -10
			light.shadow.camera.right = 10

			//告诉平行光需要开启阴影投射
			light.castShadow = true
			scene.add(light)
		}

		function initModel() {
			// var sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
			var sphereGeometry = new THREE.SphereGeometry(500, 60, 40);

			sphereGeometry.scale(1, 1, -1);
			// sphereGeometry.rotateY(180*Math.PI/180);

			var texture = new THREE.TextureLoader().load('img/1_昆仑关战役博物馆 外广场 航拍上空.jpg');
			var sphereMaterial = new THREE.MeshBasicMaterial({
				map: texture
			});

			// var sphereGeometry = new THREE.SphereGeometry(50, 20, 20);

			var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
			// sphere.material.wireframe  = true;
			scene.add(sphere);

		}


		//进度通知
		function onProgress(xhr) {
			// console.log(xhr)
			if (xhr.lengthComputable) {
				var percentComplete = xhr.loaded / xhr.total * 100;
				console.log(Math.round(percentComplete, 2) + '% downloaded');
				// loadStats(Math.round(percentComplete, 2))
			}
		};
		//报错通知
		function onError(xhr) {
			console.log("加载GLTF错误" + xhr)
		};

		function loadStats(a) {
			document.getElementsByClassName("trends")[0].style.width = a + "%";
			document.getElementsByClassName("trends")[0].innerHTML = a + '%';
			if (a < 100) {
				document.getElementById("progress").style.display = "block";
			} else {
				document.getElementById("progress").style.display = "none";
				// flyLine()
			}
		}

		function initStats() {
			stats = new Stats();
			document.body.appendChild(stats.dom);
		}

		function initControl() {

			control = new THREE.OrbitControls(camera, renderer.domElement);
		}

		function render() {

			// control.update();

			renderer.render(scene, camera);
		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);

		}
		
		
		/*
		相机焦点跟着鼠标或手指的操作移动
		 */
		function onDocumentMouseDown(event) {
		
			event.preventDefault();
			document.addEventListener('mousemove', onDocumentMouseMove, false);
			document.addEventListener('mouseup', onDocumentMouseUp, false);
		}
		
		function onDocumentMouseMove(event) {
		
			var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
			var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
		
			lon -= movementX * 0.1;
			lat += movementY * 0.1;
		
		}
		
		function onDocumentMouseUp(event) {
			document.removeEventListener('mousemove', onDocumentMouseMove);
		
			document.removeEventListener('mouseup', onDocumentMouseUp);
		}
		
		/**
		 * 鼠标滚轮改变相机焦距
		 */
		
		function onDocumentMouseWheel(event) {
			camera.fov += event.deltaY * 0.05;
			camera.updateProjectionMatrix();
		
		}
		
		function onDocumentTouchStart(event) {
			event.preventDefault();
			var touch = event.touches[0];
			touchX = touch.screenX;
			touchY = touch.screenY;
		}
		
		function onDocumentTouchMove(event) {
			event.preventDefault();
			var touch = event.touches[0];
			lon -= (touch.screenX - touchX) * 0.1;
			lat += (touch.screenY - touchY) * 0.1;
			touchX = touch.screenX;
			touchY = touch.screenY;
		
		}
		
		
		
		
		

		var controlsBtn = document.getElementById("controlBtn"); // 控制陀螺仪开关的按钮

		var isDeviceing = false; // 陀螺仪状态

		controlsBtn.addEventListener("touchend", controlDevice, true);

		isDeviceing == true ? $("#controlBtn").addClass("controlIconae") : $("#controlBtn").addClass("controlIcon");

		function initMouseControl() {

		}

	// 初始化陀螺仪

		function initDevices() {

			deviceControl = new THREE.DeviceOrientationControls(camera);

		}

		/* 控制陀螺仪 */

		function controlDevice(event) {
			if (isDeviceing == true) {
				isDeviceing = false;

				//关闭陀螺仪
				$("#controlBtn").removeClass("controlIcon").addClass("controlIconae");

			} else {

				isDeviceing = true;
				//开启陀螺仪
				$("#controlBtn").removeClass("controlIconae").addClass("controlIcon");

			}

		}


		function animate() {
			//更新控制器
			render();

			//更新性能插件
			stats.update();

			requestAnimationFrame(animate);

			// lon = Math.max(-180, Math.min(180, lon));//限制固定角度内旋转

			// lon += 0.1;//自动旋转

			lat = Math.max(-85, Math.min(85, lat)); //限制固定角度内旋转

			phi = THREE.MathUtils.degToRad(85 - lat);

			theta = THREE.MathUtils.degToRad(lon + 180);

			target.x = Math.sin(phi) * Math.cos(theta);

			target.y = Math.cos(phi);

			target.z = Math.sin(phi) * Math.sin(theta);

			camera.lookAt(target);

			camera.updateProjectionMatrix();

			isDeviceing == false ? initMouseControl() : deviceControl.update();

			renderer.render(scene, camera);
		}

		function draw() {
			initRender();
			initScene();
			initCamera();
			// initLight();
			addLight()
			initModel();
			initStats();
			initDevices() 
			// initModel()

			// initControl();

			animate();
			window.onresize = onWindowResize;
			document.addEventListener("mousedown",onDocumentMouseDown,false)
			

		}
	</script>
</html>
